<template>
  <div class="__form">
    <div class="flex-start m-b-30">
      <el-button
        icon="el-icon-back"
        type="primary"
        plain
        round
        size="small"
        @click="back"
        >返回</el-button
      >
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="130px">
      <el-form-item label="分润方名称" prop="sharerName">
        <el-input v-model="form.sharerName" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input v-model="form.contactName" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="登陆账号" prop="userCode">
        <el-input v-model="form.userCode" />
      </el-form-item>
      <el-form-item label="登陆密码" prop="userPwd">
        <el-input v-model="form.userPwd" />
      </el-form-item>
      <el-form-item class="m-t-20">
        <el-button @click="cancel" size="small" type="primary" plain
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="save"
          :loading="saveLoading"
          size="small"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <div class="h-100px"></div>
  </div>
</template>

<script>
import AppDictSelect from "@/components/business/app-dict-select";
import { isNull, msgError, msgSuccess } from "@/util/common-util";
import { submit } from "@/api/profit-sharer/profit-sharer";
import { isMobile } from "@/util/validate";

export default {
  name: "filling-profit-sharer-add",
  components: { AppDictSelect },
  props: {
    info: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      saveLoading: false,
      form: {
        // roleType: "",
        sharerName: "",
        contactName: "",
        phone: "",
      },
      rules: {
        // roleType: [
        //   { required: true, message: "请选择角色", trigger: "change" },
        // ],
        sharerName: [
          { required: true, message: "请输入分润方名称", trigger: "blur" },
        ],
        contactName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
      },
    };
  },
  created() {
    if (isNull(this.info)) return;
    this.form.id = this.info.id;
    this.form.roleType = this.info.roleType;
    this.form.sharerName = this.info.sharerName;
    this.form.contactName = this.info.contactName;
    this.form.phone = this.info.phone;
  },
  methods: {
    cancel() {
      this.back();
    },
    back(refresh) {
      this.$emit("back", refresh);
    },
    roleChange(_type) {
      this.form.roleType = _type;
    },
    save() {
      if (!isMobile(this.form.phone)) return msgError("手机号码格式不正确");
      this.form.isPromote = 0;
      this.form.loginState = 1;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true;
          submit(this.form)
            .then((res) => {
              msgSuccess();
              this.saveLoading = false;
              this.back(true);
            })
            .catch(() => {
              this.saveLoading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.__form {
  width: 48%;
}
</style>
